<template>
  <!--
  data:显示数据的
  prop：对象的属性名
  label：表头
  -->
  <div>
    <!--
     inline：行内表单
     :model="user" 绑定用户对象
     v-model="user.userName"  绑定user中的userName属性
     -->
    <!--高级查询的form表单-->
    <el-form :inline="true" style="float: left" :model="user" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="user.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="user.phone" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchSubmit">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addWindow">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <!--设置type属性为index，就显示编号，编号从1开始-->
      <el-table-column type="index" width="50" label="编号"></el-table-column>
      <el-table-column prop="name" align="center"  label="姓名"></el-table-column>
      <el-table-column prop="phone" align="center"  label="电话"></el-table-column>
      <el-table-column prop="email" align="center"  label="邮箱"></el-table-column>
      <el-table-column prop="address" align="center" label="地址"></el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--具有完整功能的分页代码 float: right整体右移  margin: 20px间隔20px-->
    <el-pagination style="float: right;margin: 20px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!--添加/修改的对话框-->
    <el-dialog  :visible.sync="dialogVisible" width="30%">
      <el-form  :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
  /*引入employee的js*/
  import employee from "../js/employee"
  export default {
    name: 'Employee',
    data() {
      return {
        //弹出框默认是关闭状态
        dialogVisible: false,
        //列表准备数据
        tableData: [],
        //设置当前页码，默认第一页
        currentPage:1,
        //默认每页展示10条
        pageSize:10,
        //每页展示的条数，下拉列表
        pageSizes:[5,10,15,20],
        //总条数
        total:0,
        user:{
          userName:"",
          phone:""
        },
        form:{
          userName:"",
          phone:""
        }

      }
    },
    methods:{
      //页码发生改变的时候，触发该函数      @param  val:页码
      handleCurrentChange(val){
        //重新设置当前页码
        this.currentPage = val;
        //再发送ajax请求
        this.loadEmployee();
      },
      //每页条数发生改变的时候，就触发该函数   @param  val：每页条数
      handleSizeChange(val){
        //把当前页设置为第一页
        this.currentPage = 1;
        //重新设置每页条数
        this.pageSize = val;
        //再发送ajax请求
        this.loadEmployee();
      },
      //加载员工列表
      loadEmployee(){
        //准备参数：当前页，每页条数
        let param = {"currentPage": this.currentPage, "pageSize": this.pageSize,"userForm":this.user};
        //vue发送ajax请求，推荐使用axios
        this.$http.post("/employee/list",param).then((res => {
          //获取mockjs响应的数据
          //获取分页列表
          this.tableData = res.data.list;
          //获取总条数
          this.total = res.data.total;
        }));
      },
      //高级查询按钮
      searchSubmit(){
        this.loadEmployee();
      },
      //删除按钮  index:行对应的下标    row:一行的数据(JSON对象)
      handleDelete(index,row){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//点击确定执行此函数
          let param = {"id":row.id};
          this.$http.post("/employee/delete", param).then((result => {
            if (result.data.success) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message.error( result.data.msg);
            }
          }));
        }).catch(() => {//点击取消执行此代码块中的内容
        });
      },
      //编辑按钮
      handleEdit(index,row){
        //显示窗口
        this.dialogVisible = true;
        console.debug(row);
        this.form = {
          userName:row.name,
          phone:row.phone
        }
      },
      //点击添加按钮，弹出窗体
      addWindow(){
        this.form = {
          userName:"",
          phone:""
        }
        //显示弹出框
        this.dialogVisible = true;
      }
    },

    //加载完毕的时候，马上执行此函数(页.面都加载完毕了，相当于jquery的$(fucntion)
    mounted(){
      this.loadEmployee();
    }
  }
</script>

